<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回"></NavBar>
    <div style="padding:10px">
      <!-- 轮播图组件 -->
      <Swiper :value="goodsImg" class="Goods-swipe"></Swiper>
      <!-- 商品详情 -->
      <div class="goodInfo">
        <van-panel :title="goodsInfo.title">
          <div class="goods_content">
            <p>
              <span>
                市场价:
                <em>¥ {{goodsInfo.market_price}}</em>
              </span>
              <span>
                销售价:
                <em>¥ {{goodsInfo.sell_price}}</em>
              </span>
            </p>
            <!-- 步进器 -->
            <div class="strpper">
              购买数量：
              <van-stepper v-model="inputValue" @change="ChangeInput()" />
            </div>
          </div>
          <div slot="footer" class="goods_footer">
            <van-button type="info">立即购买</van-button>
            <van-button type="danger" @click="handleCartAdd()">加入购物车</van-button>
          </div>
        </van-panel>
      </div>
      <!-- 商品参数 -->
      <div class="goods_params">
        <van-panel title="商品参数">
          <div class="goods_params_item">
            <p>商品货号: {{goodsInfo.goods_no}}</p>
            <p>库存情况: {{goodsInfo.stock_quantity}}件</p>
            <p>上架时间: {{goodsInfo.add_time | dateFormat}}</p>
          </div>
          <div slot="footer">
            <van-button plain type="info" block @click="GoodsDesc(goodsInfo.id)">图文介绍</van-button>
            <van-button plain type="danger" block @click="GoodsComment(goodsInfo.id)">商品评论</van-button>
          </div>
        </van-panel>
      </div>
    </div>
    <!-- 底部tab栏  -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import Vue from "vue";
import { mapMutations, mapState } from "vuex";
import { Toast } from "vant";
import Swiper from "../components/lunbotu";
import NavBar from "../components/navBar";
import TabBar from "../components/Tabbar";
Vue.use(Toast);
export default {
  components: {
    Swiper,
    NavBar,
    TabBar
  },
  data() {
    return {
      // 商品标题价格数据对象
      goodsInfo: {},
      // 轮播图数组
      goodsImg: [],
      // 输入的值
      inputValue: 1,
      // 本地缓存购物车数组
      car: []
    };
  },
  created() {
    this.getGoodsInfo();
    this.getGoodsImg();
  },
  methods: {
    ...mapMutations(["count", "addCart"]),
    // 获取商品参数区和价格，标题等数据
    async getGoodsInfo() {
      const { data: res } = await this.$http.get(
        `/api/goods/getinfo/${this.getId}`
      );
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取商品数据失败，请联系管理员");
      }
      this.goodsInfo = res.message[0];
    },
    // 获取轮播图数据
    async getGoodsImg() {
      const { data: res } = await this.$http.get(
        `/api/getthumimages/${this.getId}`
      );
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取轮播图数据失败，请联系管理员");
      }
      this.goodsImg = res.message;
    },
    // 监听 商品数量变化 使用vueX
    ChangeInput() {
      // 将最新的数据提交到vuex
      // inputValue 永远是最新的值
      this.count(this.inputValue);
    },
    // 加入购物车， 构造商品对象数组， 放入本地缓存
    handleCartAdd() {
      //   1.获取缓存中的购物车数据  数组格式
      let car = this.getItem();
      //   2.判断 当前的商品是否已经存在于 购物车
      const index = car.findIndex(v => v.id === this.goodsInfo.id);
      if (index === -1) {
        // 3.不存在该商品 第一次添加
        // 给购物车数组添加一个新元素 带上 购买数量属性count 和 选中状态selected
        this.goodsInfo.selected = true;
        // 优化性能,构造商品对象， 只接受需要用到的属性
        const goodsObj = {
          id: this.goodsInfo.id,
          count: this.inputValue,
          sell_price: this.goodsInfo.sell_price,
          selected: this.goodsInfo.selected
        };
        car.push(goodsObj);
      } else {
        // 4.已经存在购物车数据  商品数量+=步进器数量
        car[index].count += this.inputValue;
      }
      // 5.把购物车重新添加回缓存中
      this.setItem(car);
      // 5.把购物车数组提交给vuex(方便其他组件使用)
      this.addCart(car);
      // 6.提示添加成功
      Toast.success("已加入购物车");
    },
    // 读取本地存储的数据
    getItem() {
      const data = localStorage.getItem("car");
      if (data !== null) {
        // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
        return JSON.parse(data);
      } else {
        return [];
      }
    },
    // 保存本地存储数据
    setItem(data) {
      localStorage.setItem("car", JSON.stringify(data));
    },
    GoodsDesc(id) {
      // 编程式导航 到商品详情图文
      this.$router.push({ path: "/goodsdesc/" + id });
    },
    GoodsComment(id) {
      // 编程式导航 到商品评论
      this.$router.push({ path: "/goodscomments/" + id });
    }
  },
  computed: {
    ...mapState(["cart"]),
    getId() {
      // 获取id
      const id = this.$route.params.id;
      return id;
    }
  }
};
</script>

<style lang="less" scoped>
.Goods-swipe {
  height: 230px !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  .swipe-item {
    height: 200px !important;
  }
}
.goodInfo {
  margin-top: 10px;
  border: 1px solid #ccc;
  .van-cell__title {
    border-bottom: 1px solid #ccc !important;
  }
  .goods_content {
    padding: 0 20px;
    p {
      color: #8f8f94;
      font-size: 14px;
      span:first-child {
        em {
          font-style: normal;
          text-decoration: line-through;
        }
        margin-right: 10px;
      }
      span:last-child {
        em {
          color: red;
          font-style: normal;
        }
      }
    }
  }
  .strpper {
    display: flex;
  }
  .goods_footer {
    padding: 0;
    .van-button {
      margin: 10px !important;
      height: 33px;
      line-height: 33px;
      margin-left: 0 !important;
    }
  }
}
.goods_params {
  margin-top: 10px;
  border: 1px solid #ccc;
  margin-bottom: 70px;
  .van-cell__title {
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 10px;
    font-size: 16px;
  }
  .goods_params_item {
    padding: 0 15px;
    color: #8f8f94;
    p {
    }
  }
  .van-button {
    margin-bottom: 10px;
  }
}
</style>